<template>
  <div v-loading="loading">
    <el-descriptions class="margin-top" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-phone"></i>
          客户号码
        </template>
        {{ recordDetails.mobileHidden|telAnonymity }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          主键ID
        </template>
        {{ recordDetails.cdrId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item v-if="showOut">
        <template slot="label">
          座席工号
        </template>
        {{ recordDetails.cdrCno || '-' }}
      </el-descriptions-item>
      <el-descriptions-item v-if="showIn">
        <template slot="label">
          接听的座席工号
        </template>
        {{ recordDetails.cdrCalleeCno || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          企业ID
        </template>
        {{ recordDetails.cdrEnterpriseId || '-' }}
      </el-descriptions-item>
      <template v-if="showIn">
        <el-descriptions-item>
          <template slot="label">
            中继号码
          </template>
          {{ recordDetails.cdrNumberTrunk || '-' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            热线号码
          </template>
          {{ recordDetails.cdrHotline || '-' }}
        </el-descriptions-item>
      </template>
      <el-descriptions-item>
        <template slot="label">
          通话标识
        </template>
        {{ recordDetails.cdrMainUniqueId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          虚拟小号
        </template>
        {{ recordDetails.cdrXNumber || '-' }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          客户号码所属区号
        </template>
        {{ recordDetails.cdrCustomerAreaCode || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户号码所属省/市
        </template>
        {{ recordDetails.cdrCustomerProvince || '-' }}/{{ recordDetails.cdrCustomerCity || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户号码类型
        </template>
        {{ getTelTypeText(recordDetails.cdrCustomerNumberType) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          呼叫状态
        </template>
        {{ getCdrStatusText(recordDetails.cdrStatus) || '未知' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          呼叫类型
        </template>
        {{ getCallTypeText(recordDetails.cdrCallType) || '未知' }}
      </el-descriptions-item>
      <el-descriptions-item v-if="showIn">
        <template slot="label">
          呼入进入队列时间
        </template>
        {{ recordDetails.cdrJoinQueueTime|dataFormat }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          {{ showIn ? '呼入座席接听时间' : '外呼客户接听时间' }}
        </template>
        {{ recordDetails.cdrBridgeTime|dataFormat }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          {{ showIn ? '进入系统时间' : '座席发起外呼时间' }}
        </template>
        {{ recordDetails.cdrStartTime|dataFormat }}
      </el-descriptions-item>
      <el-descriptions-item v-if="showOut">
        <template slot="label">
          客户振铃时间
        </template>
        {{ recordDetails.calleeRingingTime|dataFormat }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          {{ showIn ? '系统接听时间' : '外呼座席接听时间' }}
        </template>
        {{ recordDetails.cdrAnswerTime|dataFormat }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          {{ showIn ? '呼入挂机时间' : '外呼挂机时间' }}
        </template>
        {{ recordDetails.cdrEndTime|dataFormat }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          通话请求id
        </template>
        {{ recordDetails.cdrRequestUniqueId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          挂机原因
        </template>
        {{ getCdrEndReasonText(recordDetails.cdrEndReason) || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          外呼双方接听时长
        </template>
        {{ callDurationFormat(recordDetails.cdrEndTimeCdrBridgeTime) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          座席绑定电话
        </template>
        {{ recordDetails.cdrAgentNumber || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          座席绑定电话类型
        </template>
        {{ getCdrAgentNumberTypeText(recordDetails.cdrAgentNumberType) || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户侧外显号码
        </template>
        {{ recordDetails.custCalleeClid || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          座席侧外显号码
        </template>
        {{ recordDetails.cdrClid || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户侧外显号码
        </template>
        {{ recordDetails.previewOutcallLeftClid || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          座席所属座席组
        </template>
        {{ recordDetails.cdrGno || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          号码状态识别结果
        </template>
        {{ getCdrDetailSipCauseText(recordDetails.cdrDetailSipCause) || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          满意度调查开始时间
        </template>
        {{ recordDetails.cdrInvestigation|dataFormat }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          开始时间
        </template>
        {{ recordDetails.startTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          客户id
        </template>
        {{ recordDetails.crmId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          二级部门所在id
        </template>
        {{ recordDetails.mchId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          员工所在部门id
        </template>
        {{ recordDetails.deptId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          销售名称
        </template>
        {{ recordDetails.nickName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          录音文件大小
        </template>
        {{ recordDetails.fileSize || '-' }} <span v-if="recordDetails.fileSize">字节</span>
      </el-descriptions-item>
      <el-descriptions-item v-if="showIn">
        <template slot="label">队列号</template>
        {{ recordDetails.cdrQueue || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">订单号</template>
        {{ recordDetails.orderId || '-' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">渠道订单号</template>
        {{ recordDetails.coopOrderID || '-' }}
      </el-descriptions-item>
      <el-descriptions-item></el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          录音文件
        </template>
        <div>
          名称：{{ recordDetails.cdrRecordFile1 || '-' }}<br/>
          地址：
          <template v-if="recordDetails.cosRecordUrl">
            <a :href="recordDetails.cosRecordUrl" target="_blank">{{ recordDetails.cosRecordUrl || '-' }}</a><br/>
<!--            <a class="el-link el-link&#45;&#45;primary" :href="recordDetails.cosRecordUrl" :download="recordDetails.cdrId+'.mp3'" v-hasPermi="['crm:outcallRecord:download']"><i class="el-icon-download"></i> 下载录音文件(或者右键链接另存为) </a>-->
          </template>
          <template v-else>-</template>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <br/>
    <el-descriptions class="margin-top" :column="1" border>
      <el-descriptions-item label="通话备注">{{ recordDetails.comment || '-' }}</el-descriptions-item>
    </el-descriptions>

  </div>
</template>

<script>
import { getCdrCallRecordDetails, getCallBackDetail } from '@/api/call/call';
import { mapGetters } from 'vuex';
import { formatDate } from '@/utils/index';

export default {
  name: 'CallRecordDetails',
  props: ['cdrId', 'callType', 'cdrMainUniqueId'],
  data() {
    return {
      loading: false,
      recordDetails: {},
      CALL_TYPE_IN: 1,
      CALL_TYPE_OUT: 4
    };
  },
  computed: {
    ...mapGetters('call', [
      'getCdrStatusText',
      'getCallTypeText',
      'getTelTypeText',
      'getCdrEndReasonText',
      'getCdrAgentNumberTypeText',
      'getCdrDetailSipCauseText'
    ]),
    showOut() {
      return this.callType === this.CALL_TYPE_OUT;
    },
    showIn() {
      return this.callType === this.CALL_TYPE_IN;
    }
  },
  created() {
    this.getDetails();
  },
  filters: {
    dataFormat(value) {
      return value ? formatDate(value * 1000) : '-';
    }
  },
  methods: {
    async getDetails() {
      let query = {};
      if (!this.cdrId && !this.cdrMainUniqueId) return this.$message.error('缺少记录id');
      const id = this.cdrId;
      if (this.cdrId) {
        query.id = this.cdrId;
      }
      if (this.cdrMainUniqueId) {
        query.cdrMainUniqueId = this.cdrMainUniqueId;
      }
      this.loading = true;
      if (this.showOut) {
        await getCdrCallRecordDetails(query).then((response) => {
          this.recordDetails = response.data || {};
        });
      }
      if (this.showIn) {
        await getCallBackDetail(query).then((response) => {
          this.recordDetails = response.data || {};
        });
      }
      this.loading = false;
    },
    // 通话时长
    callDurationFormat(timeStr) {
      let timeArr = (timeStr || '').split('-') || [];
      if (timeArr && timeArr[0] && timeArr[1]) {
        let dr = timeArr[0] - timeArr[1];
        return this.timeToHMS(dr);
      }
      return 0;
    },
    timeToHMS(data) {
      let h = Math.floor(data / 3600) < 10 ? '0' + Math.floor(data / 3600) : Math.floor(data / 3600);
      let m = Math.floor((data / 60 % 60)) < 10 ? '0' + Math.floor((data / 60 % 60)) : Math.floor((data / 60 % 60));
      let s = Math.floor((data % 60)) < 10 ? '0' + Math.floor((data % 60)) : Math.floor((data % 60));
      return h + ':' + m + ':' + s;
    }
  },
  watch: {
    cdrId(val) {
      this.getDetails();
    },

    cdrMainUniqueId(val) {
      this.getDetails();
    }
  }
};
</script>
